@import '../common.scss';

#footer {
  margin-top: auto;

  @include from($desktop) {
    align-items: center;
  }

  a:hover {
    background-color: transparent !important;
  }

  .footer__navigation {
    display: none;

    @include to($large) {
      width: 100%;
      display: block;

      &-link-container {
        display: flex;
        flex-direction: column;
      }
    }

    &-link {
      font-size: 1rem;
      line-height: 18px;
      white-space: nowrap;
      font-family: $font-heading;
      margin-left: 0 !important;
      margin-right: auto;

      @include to($tablet) {
        line-height: 8px;
      }

      &:hover {
        color: var(--color-background) !important;
        background-color: var(--color-text) !important;
      }

      &:nth-of-type(n + 2) {
        margin-top: 2.142rem;
      }
    }

    @include from($large) {
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-end;

      &-link {
        margin-top: 0 !important;
        margin-bottom: auto;

        &:nth-of-type(n + 1) {
          margin-right: 2.877rem;
        }

        &:last-of-type {
          margin-right: 0 !important;
        }
      }
    }
  }
}
